<template>
  <div class="home">
    <!-- 搜索框 -->
    <Search v-model="searchKeyword" placeholder="请输入评价名称" show-action />

    <!-- 评价列表 -->
    <div class="evaluation-list">
      <Cell
          v-show="!deleteShow"
          is-link
          v-for="evaluation in filteredEvaluations"
          :key="evaluation.id"
          :title="evaluation.title"
          @click="goToDetail(evaluation)"
      />
      <Row v-for="evaluation in filteredEvaluations">
        <Col span="21">
          <Cell
              v-show="deleteShow"
              :key="evaluation.id"
              :title="evaluation.title"
          />
        </Col>
        <Col class="checkbox" span="3" v-show="deleteShow">
          <CheckboxGroup v-model="checked" >
            <Checkbox shape="square"  :name="evaluation.id"/>
          </CheckboxGroup>
        </Col>
      </Row>
    </div>

    <div class="delete"  style="bottom: 33px; left: 33px"
         @click="deleteMode" v-show="!deleteShow">
      <img src="../../assets/images/evaDelete.png" width="50">
<!--      <Icon name="delete-o" size="30px" />-->
    </div>
    <div class="delete"  style="bottom: 30px; left: 30px"
         @click="deleteConfirm" v-show="deleteShow">
      <img src="../../assets/images/evaConfirm.png" width="55">
<!--      <Icon name="success" size="30px"/>-->
    </div>
  </div>
</template>

<script setup name="Evaluation">
import {Cell, Search, Icon, Checkbox, Row, Col, CheckboxGroup, Toast} from "vant";
import { computed, onMounted, ref, watch } from "vue";
import {deleteTitles, getTitles} from "@/v-api/school/evaluation";
import { Local } from "@/utils/storage";
import { useRouter } from "vue-router";
const router = useRouter();


//数据获取
const evaluations = ref([])
const fetchEvaluations = async () => {
  evaluations.value = ( await getTitles() ).data
  // console.log(evaluations.value)
}
fetchEvaluations();

// 搜索
const searchKeyword = ref('');
const filteredEvaluations = computed(() => {
  return evaluations.value.filter(evaluation => evaluation.title.includes(searchKeyword.value));
});

//进入详情页
const goToDetail = (evaluation) =>{
    router.push({
      name: 'evaluateDetails',
      query: {
        evaluationId: evaluation.id, // 将选中的评价的 ID 传递给 evaluateDetails 页面
        evaluationName: evaluation.title
      }
    })
}

//删除
const deleteShow = ref(false)
const checked = ref([]);
for (let i = 0; i < evaluations.value.length; i++) {
  checked.value[i] = evaluations.value[i].id;
}
const deleteMode = () =>{
  deleteShow.value = true;

}
/**
 * 执行删除的函数
 */
const deleteConfirm = () =>{
  console.log(checked.value)
  deleteShow.value = false;

  if(checked.value.length === 0){
    Toast.fail({
      message: "请选择需要删除的评价",
      position: "bottom"
    })
  }else{
    //执行删除
    deleteTitles(checked.value)
    Toast.success({
      message: "删除成功",
      position: "bottom"
    })
    //置空复选框
    checked.value = []
  }
  fetchEvaluations()
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.evaluation-list {
  margin-top: 20px;
  border: 1px solid #ddd;
}

.checkbox{
  display: flex;
  //justify-content: flex-end; /* 将内容对齐到容器的末端 */
  align-items: center; /* 垂直居中对齐 */
}

.delete{
  position: fixed; /* 使用 fixed 定位使其浮动在页面上 */
  cursor: pointer; /* 鼠标移上去显示手型 */
  z-index: 1000; /* 控制图标的层级，避免被其他元素遮挡 */
  border-color: white;
}
</style>
